<template>
    <div class="containers">
        <el-radio-group @change="changeDate(value)" v-model="value" size="small">
            <el-radio-button v-for="(item, index) in timeArr" :key="index" :label="item.value">{{ item.label
            }}</el-radio-button>
        </el-radio-group>
        <el-date-picker size="small" :picker-options="pickerOptions" :clearable="false" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" v-model="dateArr" @change="changeValue" style="width: 240px" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
</template>
<script>
export default {
    props: {
        timeArr: { // radiobutton选项配置30天及以上自由配置
            type: Array,
            default: () => {
                return []
            }
        },
        dayActive: { // 默认选项
            type: [String, Number],
            default: "7"
        },
        today: {  // 默认包含今天
            type: Boolean,
            default: true
        },
        dayLimit: {  // 能查最近天数 从今天开始往历史事件算
            type: [String, Number],
            default: "180"
        }
    },
    data() {
        return {
            // 配合dayLimit使用的，配置只能选择的天数
            pickerOptions: {
                disabledDate: (time) => { // 小于今天 最多180天(需要今天 与不需要今天)
                    let todayStart = this.$dayjs().format("YYYY-MM-DD 00:00:00");
                    // let yesterdayStart = this.$dayjs().subtract(1,"day").format("YYYY-MM-DD 00:00:00")
                    let yesterdayEnd = this.$dayjs().subtract(1, "day").format("YYYY-MM-DD 23:59:59")
                    let todayEnd = this.$dayjs().format("YYYY-MM-DD 23:59:59");
                    if (this.today) { //包含今天
                        return time.getTime() > new Date(todayEnd).getTime() || time.getTime() < new Date(todayStart).getTime() - 8.64e7 * this.dayLimit;
                    } else {  //不包含今天[统一前挪一天]
                        return time.getTime() > new Date(yesterdayEnd).getTime() || time.getTime() < new Date(todayStart).getTime() - 8.64e7 * this.dayLimit;
                    }
                }
            },
            value: "",
            dateArr: []
        }
    },
    created() {
        this.changeDate(this.dayActive);// 初始化 
    },
    methods: {
        // 时间格式转换
        dateFormat(date) {
            date = new Date(date);
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '';
            return Y + M + D
        },
        // 昨天 最近7天 最近30天选择
        changeDate(label) {
            this.value = label
            const end = new Date();
            const start = new Date();
            let newStart = ""; let newEnd = "";
            if (label == 1) { // 今日1
                newStart = this.dateFormat(start.setTime(start.getTime() - 86400000 * label + 86400000));
                newEnd = this.dateFormat(end.setTime(end.getTime()));
            } else if (label == 2) { // 昨天2
                newStart = this.dateFormat(start.setTime(start.getTime() - 86400000));
                newEnd = this.dateFormat(end.setTime(end.getTime() - 86400000));
            } else { // 处理7天 30天 或者更多
                if (this.today) { // 包含今天
                    newStart = this.dateFormat(start.setTime(start.getTime() - 86400000 * label + 86400000));
                    newEnd = this.dateFormat(end.setTime(end.getTime()));
                } else {
                    newStart = this.dateFormat(start.setTime(start.getTime() - 86400000 * label));
                    newEnd = this.dateFormat(end.setTime((end).getTime() - 8.64e7));
                }
            }
            // console.log("日期11",newStart ,newEnd)
            this.dateArr = [newStart, newEnd]
            this.$emit('changDay', label)
            this.$emit('getDateArr', this.dateArr)
        },
        // 选择时间
        changeValue() {
            this.$emit('changDay', '')
            this.$emit('getDateArr', this.dateArr)
            this.$nextTick(() => {
                this.value = this.dayActive
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.containers {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .el-radio-group {
        margin-right: 10px;
    }
}
</style>
